<template>
  <view class="cart">
    <!-- 导航 -->
    <view class="nav">
      <!-- 购物车 -->
      <view class="top">
        <image class="image" src="../../static/image/返回.png" mode=""></image>
        <p>购物车</p>
        <p>(2)</p>
        <p>管理</p>
      </view>
      <!-- 送达时间 -->
      <view class="time">
        <p>最快<span>30</span>分钟送达</p>
        <p><text>3</text>张可用优惠卷 ></p>
      </view>
      <!-- 优惠 -->
      <view class="Preferential">
        <p><span>满减优惠</span>再买39.9可享 满29.9减10</p>
        <p><text>去凑单></text> </p>
      </view>
    </view>
    <!-- 复选框 -->
    <view class="checkbox" v-for="item in list" :key="index">
      <checkbox-group class="checkbox1">
        <label>
          <u-checkbox v-model="checked" :label-disabled="false" value="a" /><text
            style="font-weight: bold; font-size: 18px;">{{item.title}}</text>
        </label>
      </checkbox-group>
      <view class="total">
        <view class="left">
          <u-checkbox v-model="checked" :label-disabled="false" />
          <image class="image" :src="item.image" mode=""></image>
        </view>
        <view class="right">
          <p>{{item.title2}}</p>
          <p>{{item.title3}}</p>
          <view class="bottom">
            <p>￥{{item.price}}<span>/笼</span></p>
            <view class="below">
              <button class="btn">-</button> {{item.num}} <button class="btn1">+</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 复选框 -->
    <!-- <view class="checkbox">
      <checkbox-group class="checkbox1">
        <label>
          <u-checkbox v-model="checked" :label-disabled="false" /><text
            style="font-weight: bold; font-size: 18px;">生鲜多人供应商直发</text>
        </label>
      </checkbox-group>
      <view class="total">
        <view class="left">
          <u-checkbox v-model="checked" :label-disabled="false" />
          <image class="image" src="../../static/image/西兰花.png" mode=""></image>
        </view>
        <view class="right">
          <p>高山本地生菜</p>
          <p style="border: 1px solid #4fbf7b; color: #4fbf7b;">急速发货</p>
          <view class="bottom">
            <p>￥4.79<span>/斤</span></p>
            <view class="below">
              <button class="btn" @click="subNum1">-</button> {{num1}} <button class="btn1" @click="addNum1">+</button>
            </view>
          </view>
        </view>
      </view>
    </view> -->
    <!-- 猜你喜欢 -->
    <view class="like">
      猜你喜欢
    </view>
    <!-- 今日疯抢 -->
    <view class="today">
      <view class="today1">
        <goods :title="require('../../static/image/西红柿.png')" title1="云南高山大西红柿" title2="鲜嫩多汁 | 软甜爽口 | 入口美味"
          title3="美味多汁" title4="￥2.44" title5="/斤">
          <template #t1>券</template>
          <template #t2>减10元</template>
        </goods>
      </view>
      <view class="today1">
        <goods :title="require('../../static/image/马铃薯.png')" title1="宁夏西吉县马铃薯" title2="基地直供 | 绿色培枯 | 新鲜采摘"
          title3="绿色新鲜" title4="￥3.12" title5="/斤">
          <template #t1>券</template>
          <template #t2>减5元</template>
        </goods>
      </view>
    </view>
    <!-- 全选 -->
    <view class="select ">
      <view class="top">
        <u-checkbox @click="checkedAll" v-model="checked" :label-disabled="false" /><text>全选</text>
      </view>
      <view class="bottom">
        <p>配送费￥0</p>
        <p>合计</p>
        <!-- <p>￥17.68</p> -->
        <p>￥{{all}}</p>
        <view class="settlement">
          <button>去结算(2)</button>
        </view>
      </view>
    </view>
    <!--    {{username}}
    {{this.$store.state.age}}
    <button @click="a">获取经纬度</button> -->
  </view>
</template>

<script>
  import goods from '../../components/goods.vue'
  import store from '../../store/index';
  export default {
    components: {
      goods
    },
    data() {
      return {
        checked: false,
        list: [{
            title: '生鲜多人供应商直发',
            title2: '江苏无锡香菇猪肉包',
            title3: '限时秒杀',
            price: '8.79',
            num: 1,
            image: '../../static/image/包子.png'
          },
          {
            title: '生鲜多人供应商直发',
            title2: '高山本地生菜',
            title3: '极速发货',
            price: '4.79',
            num: 2,
            image: '../../static/image/西兰花.png'
          }
        ]
      }
    },
    computed: {
      username() {
        return store.state.username
      },
      all() {
        return this.list.reduce((a1, b1) => {
          return a1 + b1.price * b1.num
        }, 0).toFixed(2)
      },
    },
    methods: {
      
      // a(){
      //   uni.getLocation({
      //   	type: 'wgs84',
      //   	success: function (res) {
      //   		console.log('当前位置的经度：' + res.longitude);
      //   		console.log('当前位置的纬度：' + res.latitude);
      //   	}
      //   });
      // },
      // 全选
      checkedAll(e) {
        console.log(e);
      },
      checkedAll1(e) {
        console.log(e);
      }
    }
  }
</script>

<style lang="scss">
  .cart {
    width: 100%;
    background-color: #f9f9f9;
    // position: relative;

    .nav {
      background: linear-gradient(to bottom right, #e1f7eb, white);
      width: 100%;
      margin: auto;
      padding-top: 50rpx;

      // 购物车
      .top {
        width: 35%;
        margin-left: 15rpx;
        display: flex;
        justify-content: space-between;
        height: 50rpx;
        line-height: 50rpx;

        p:nth-child(2) {
          font-weight: bold;
          font-size: 18px;
        }

        p:nth-child(3) {
          font-size: 12px;
        }

        p:nth-child(4) {
          font-size: 12px;
        }

        .image {
          width: 30px;
          height: 30px;
        }
      }

      //送达时间
      .time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        margin: auto;
        margin-top: 20rpx;
        background-color: white;
        border-radius: 20rpx;
        font-size: 25rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 15rpx;

        p:nth-child(1) {
          margin-left: 15rpx;
        }

        p:nth-child(2) {
          margin-right: 15rpx;
        }

        span {
          color: green;
        }

        text {
          color: orange;
        }
      }

      // 优惠
      .Preferential {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        margin: auto;
        margin-top: 20rpx;
        height: 60rpx;
        line-height: 60rpx;
        background-color: white;
        border-radius: 20rpx;
        font-size: 30rpx;

        span {
          display: inline-block;
          background-color: #fed5d2;
          color: red;
          margin-right: 20rpx;
          font-size: 24rpx;
          border-radius: 10rpx;
          text-align: center;
          width: 120rpx;
          height: 40rpx;
          line-height: 40rpx;
          margin-left: 15rpx;
        }

        text {
          font-weight: bold;
          margin-right: 15rpx;
        }
      }
    }

    .checkbox {
      width: 90%;
      margin: auto;
      margin-top: 20rpx;
      padding: 10rpx;
      background-color: #ffffff;
      border-radius: 20rpx;

      .total {
        display: flex;
        justify-content: space-between;

        .left {
          width: 35%;
          display: flex;
          justify-content: space-around;

          checkbox {
            margin-top: 60rpx;
          }

          image {
            width: 120px;
            height: 100px;
          }
        }

        .right {
          width: 60%;
          padding: 10rpx;

          p:nth-child(1) {
            font-weight: bold;
            font-size: 18px;
          }

          p:nth-child(2) {
            width: 80px;
            text-align: center;
            color: #f3b081;
            border: 1px solid #f3b081;
            font-size: 13px;
          }
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          margin-top: 10rpx;

          p {
            color: #ee9252;

            span {
              color: #aeaeae;
              font-size: 20rpx;
            }
          }

          .below {
            display: flex;
            justify-content: space-between;
            width: 45%;
            height: 30px;
            line-height: 30px;

            .btn {
              width: 20px;
              height: 30px;
              line-height: 30px;
              border-radius: 50%;
              background-color: white;
              border: 1px solid #999999;
              color: #a1a1a1;
              text-align: center;
            }

            .btn1 {
              width: 20px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              border-radius: 50%;
              background: linear-gradient(to bottom right, #69c391, white);
              color: #ffffff;
            }
          }

        }
      }

    }

    // 猜你喜欢
    .like {
      padding: 30px;
      width: 30%;
      height: 30px;
      line-height: 30px;
      margin: auto;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }

    // 今日疯抢
    .today {
      margin: auto;
      width: 90%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .today1 {
        width: 48%;

        .goods {
          margin-top: 10px;
          width: 100%;
        }
      }
    }

    // 全选
    .select {
      width: 90%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      background-color: #ffffff;
      margin-top: 10px;
      padding: 10px;

      .top {
        width: 20%;
        height: 40px;
        line-height: 40px;
        margin-left: 10px;
      }

      .bottom {
        width: 70%;
        margin-right: 10px;
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;

        p:nth-child(1) {
          font-size: 12px;
          color: #b6b6b6;
        }

        p:nth-child(2) {
          font-size: 14px;
          font-weight: bold;
        }

        p:nth-child(3) {
          color: #ee8c48;
        }

        .settlement {
          button {
            height: 40px;
            line-height: 40px;
            border-radius: 20rpx;
            background: linear-gradient(to bottom right, #49c07e, #a6e8c3);
            color: white;
          }
        }
      }

    }
  }
</style>